<template>
	<view class="changename">
		<u-navbar title="编辑资料" @rightClick="rightClick" :autoBack="true"></u-navbar>
		<view class="changeusernamecard">
			<view class="">
				用户名:
			</view>
			<u--input placeholder="请输用户名" border="bottom" v-model="value" clearable @change="change"></u--input>
		</view>
		<view class="saveusername" @click="savename">
			保存
		</view>
		<u-toast ref="uToast"></u-toast>
	 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				show: false,
				list: [ 
					{
						type: "error",
						icon: false,
						title: "失败主题",
						message: "填写用户名",
						iconUrl: "https://xxx.com/demo/toast/error.png",
					},
					 
					 
					 
				],
			}
		},
		methods: {
			rightClick() {
				console.log('rightClick');
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
			change() {
				console.log(this.value)
			},
			savename() {
				console.log(this.value)
				if (this.value) {
					uni.switchTab({
						url: '/pages/user/user'
					})
				}else{
					this.showToast(this.list[0])
				}

			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url &&
							uni.navigateTo({
								url: params.url,
							});
					},
				});
			},
		}
	}
</script>

<style lang="less">
	.changename {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.changeusernamecard {
		width: 100%;
		position: relative;
		top: 15%;
		display: flex;
		box-sizing: border-box;
		padding: 0 10px;
		align-items: center;
	}

	.saveusername {
		position: fixed;
		bottom: 10%;
		width: 90%;
		left: 50%;
		transform: translateX(-50%);
		height: 40px;
		background: #aaffff;
		border-radius: 10px;
		text-align: center;
		line-height: 40px;
	}

	.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}
</style>